<template>
  <div class="page">
    <logo :type="'red'"></logo>
    <div class="featureList-swiper-ct ani" 
    swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay=".4s"
    >
      <swiper class="featureList-swiper" :options="shareholderSwiperOption">
        <swiper-slide v-for="(item,index) in manager" :key="index">
          <div class="featureList-info">
            <div class="featureList-logo">
              <img :src="item.avator">
            </div>
            <div class="text-area">
              <p class="name">
                {{item.chinese}}
                <span class="job">{{item.duty}}</span>
              </p>
              <p class="desc">{{item.description}}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="btn2 prev-btn2">
        <i class="iconfont icon-back"></i>
      </div>
      <div class="btn2 next-btn2">
        <i class="iconfont icon-more"></i>
      </div>
    </div>
  </div>
</template>

<script>
import logo from "./logo";
export default {
  data() {
    return {
      shareholderSwiperOption: {
        navigation: {
          nextEl: ".next-btn2",
          prevEl: ".prev-btn2"
        }
      }
    };
  },
  props: {
    manager: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    logo
  }
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  height: 100%;
  background-image: url(./img/manager-page.jpg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #333;
}

.featureList-swiper-ct {
  position: absolute;
  top: rem(330);
  top: 28vh;
  width: 100%;
  .featureList-swiper {
    .featureList-info {
      height: 100%;
      .featureList-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: rem(395);
        img {
          display: block;
          width: rem(265);
          height: rem(395);
        }
      }
      .text-area {
        margin: 0 rem(92);
        .name {
          margin-top: rem(25);
          font-size: rem(44);
          color: #ca3832;
          line-height: rem(46);
          padding-bottom: rem(20);
          border-bottom: 1px solid #333;
          .job {
            margin-left: rem(10);
            font-size: rem(28);
            color: #333;
          }
        }
        .desc {
          padding-top: rem(13);
          line-height: rem(40);
          font-size: rem(30);
          color: #666;
        }
      }
    }
  }
  .btn2 {
    position: absolute;
    z-index: 10;
    top: rem(378);
    display: block;
    width: rem(51);
    height: rem(51);
    text-align: center;
    line-height: rem(51);
    color: #afafaf;
    outline: none;
    &.swiper-button-disabled {
      opacity: 0.5;
    }
    &.prev-btn2 {
      left: rem(6);
    }
    &.next-btn2 {
      right: rem(16);
    }
    .iconfont {
      font-size: rem(70);
      outline: none;
    }
  }
}
</style>
